"use client"
import { Tabs,Anchor,List,Affix,Divider,Drawer } from "antd";
import { useSearchParams } from "next/navigation"
import AbilityIntroduction from "./AbilityIntroduction";
import FunctionExperience from "./FunctionalExperience";
import TechnicalAdvantages from "./TechnicalAdvantages"
import ApplicationScenarios from "./ApplicationScenarios";
import Footer from "@/app/(components)/Footer.tsx";
import { AbilityIntroInfo } from "./AbilityIntroduction";
import { FunctionExpInfo } from "./FunctionalExperience";
import { TechAdvantageInfo } from "./TechnicalAdvantages";
import {ApplySceneryInfo} from "./ApplicationScenarios";
import { useEffect, useState,useRef } from "react";
import { AbilityIntroInfos,AppliScenInfos,TechAdvantageInfos,FunctionExpInfos,techImages } from "./config/config";
import { boolean } from "joi";
import Link from "next/link";
export default function TechDetail() {
    const query = useSearchParams();
    const title = query.get("title") || ''
    const [introInfos,setIntroInfos]=useState<AbilityIntroInfo[]>([])
    const [applyInfos,setApplyInfos]=useState<ApplySceneryInfo[]>([])
    const [techAdvanInfos,setTechAdvanInfos]=useState<TechAdvantageInfo[]>([])
    const [functionExpInfo,setFunctionExpInfo]=useState<FunctionExpInfo>()
    const isAIGC = title==="AI图生图"
    const isCompare=(title==="自然场景抠图"||title==="绿幕抠图"||title==="头发分割")
    const bgImg=techImages.find((k)=>{if(k.theme==title) return k.imgUrl})
    const bgDesc=techImages.find((k)=>{if(k.theme==title) return k.description})
    useEffect(()=>{
        const introInfos=AbilityIntroInfos.filter((k)=>k.theme==title)
        const applyInfos=AppliScenInfos.filter((k)=>k.theme==title)
        const techAdvanInfos=TechAdvantageInfos.filter((k)=>k.theme==title)
        const functionExpInfo=FunctionExpInfos.find((k)=>k.theme==title)
        setIntroInfos(introInfos)
        setApplyInfos(applyInfos)
        setTechAdvanInfos(techAdvanInfos)
        setFunctionExpInfo(functionExpInfo)
    },[title])

    const getKit=()=>{
        switch(title){
            case "人脸关键点识别": return "face"
            case "人脸检测": return "face_detection"
            case "手势识别": return "gesture"
            case "自然场景抠图": return "pelee_segment"
            case "绿幕抠图": return "pelee_segment"
            case "头发分割": return "hair_segment"
            case "人头检测": return "head_detection"
            case "人体关键点识别": return "pose"
            default:return ''
        }
    }
    return (
        <div>
            <div className="w-full h-[500px]">
                <img src={bgImg?.imgUrl} className="w-full h-full overflow-hidden object-cover"></img>
                <div className='absolute top-[60px] z-[99] h-[500px] inset-0 flex justify-center items-center'>
                    <div className={`w-[1100px] flex flex-col justify-center gap-[30px] text-white`}>
                        <div className="title text-[52px] front-bold">{title}</div>
                        <div className="w-[1100px] text-[20px]">{bgDesc?.description}</div>
                    </div>
                </div>
            </div>
            <Affix offsetTop={60}>
                <div className="pt-5 bg-white"  >
                    <Anchor
                        affix={false}
                        className="w-[1100px]" 
                        style={{ margin:"0 auto" }}
                        direction="horizontal"
                        targetOffset={80}
                        replace
                        items={[
                        {
                            key: 'part-1',
                            href: '#part-1',
                            title: '能力介绍',
                        },
                        {
                            key: 'part-2',
                            href: '#part-2',
                            title: '功能体验',
                        },
                        {
                            key: 'part-3',
                            href: '#part-3',
                            title: '技术优势',
                        },
                        {
                            key: 'part-4',
                            href: '#part-4',
                            title: '应用场景',
                        },
                        ]}
                    />
                 </div>
            </Affix>
            <AbilityIntroduction data={introInfos}/>
            <FunctionExperience data={functionExpInfo as any} isAIGC={isAIGC} isCompare={isCompare} kit={getKit()}/>
            <TechnicalAdvantages data={techAdvanInfos}/>
            <ApplicationScenarios data={applyInfos}/>
            <Footer/>
        </div>
    )
}
